<template>
<div>
    <!--            标题-->
    <el-row class="border_bottom" type="flex" justify="start">
        <el-col :span="4">
            <h3> 会员账户变动明细</h3>
        </el-col>
    </el-row>
    <!--            选项-->
   <el-row class="userdetil">
       <el-col :span="2" class="" style="padding: 0;margin: 0">
        <span>当前会员：</span>
           <span>{{name}}</span>

       </el-col>
<!--       <el-col :span="3" style="padding: 0;margin: 0">-->
<!--           <span>可用资金账户：</span>-->
<!--           <span>￥{{Availablefundaccount}}</span>-->

<!--       </el-col>-->
<!--       <el-col :span="3" style="padding: 0;margin: 0">-->
<!--           <span>冻结资金账户：</span>-->
<!--           <span>￥{{Freezefundaccount}}</span>-->

<!--       </el-col>-->
<!--       <el-col :span="3" class="border_bottom">-->
<!--           <span>等级资金账户：</span>-->
<!--           <span>￥{{Gradefundaccount}}</span>-->

<!--       </el-col>-->
       <el-col :span="3">
           <span>消费资金账户：</span>
           <span>￥{{Consumptionfundaccount}}</span>

       </el-col>



   </el-row>

    <el-row>
        <template>
            <el-table
                    :data="userdetil"
                    style="width: 100%">

                <el-table-column
                        prop="pointEvent"
                        label="账户变动原因"
                        width="380"

                >
                </el-table-column>

                <el-table-column

                        label="消费积分账户"
                >
                    <template slot-scope="scope">

                        <span v-if="scope.row.pointStatus==1"  :class="scope.row.pointStatus==0?'redColor':'greenColor'">           +{{scope.row.pointValue}}</span>
                        <span v-else :class="scope.row.pointStatus==0?'redColor':'greenColor'">           -{{scope.row.pointValue}}</span>


                    </template>
                </el-table-column>
            </el-table>
        </template>

    </el-row>

    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="5"
                layout="total, prev, pager, next"
                :total="count">
        </el-pagination>
    </el-row>




</div>


</template>

<script>
    import router from "@/router";

    export default {
        name: "MemberAccountDetails",
        data(){
            return{
                currentSearchId:'',
                name:'张三',
                //可用资金账户
                Availablefundaccount:'0.00',
                // 冻结资金账户
                Freezefundaccount:'0.00',
                // 等级积分账号
                Gradefundaccount:'0.00',
                // 消费积分账户
                Consumptionfundaccount:'0.00',
                userdetil: [
                ],
                count:0,
                class:''
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.$axios.post('/api/point/list?userId='+this.currentSearchId+'&page='+val).then((res)=>{
                    console.log('=================================================')

                    this.userdetil=res.data.data
                    this.count=res.data.count
                    console.log(this.userdetil)
                })

                console.log(`当前页: ${val}`);
            }
        },
        created() {
            console.log(this.$router.options.routes[2].children);

            this.currentSearchId =sessionStorage.getItem('currentSearchId');
            //发起请求


            console.log(this.currentSearchName)
            this.$axios.post('/api/point/list?userId='+this.currentSearchId+'&page=1').then((res)=>{
                console.log('=================================================')

                this.userdetil=res.data.data
                this.count=res.data.count
                console.log(this.userdetil)
            })

        }
    }
</script>



<style scoped>

    .greenColor{
        color: green;
    }
    .redColor{
        color: red;
    }


    .border_bottom {

        border-bottom: 1px solid grey;
    }
    span{
        font-size: 16px;
    }
.el-col{
    padding: 0px;
}
.userdetil{
    /*background-color: grey;*/
}
</style>